<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">OKR详情</block></cu-custom>
		
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
		   <view class="propertyBox">
		     <view class="cu-item" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in modules" :key="index" @tap="tabSelect" :data-id="index">
		       {{ item.name }}
		     </view>
		   </view>
		 </scroll-view>
		 
		<view class="" style="margin-bottom: 30px;background-color: #f0f0f0;" v-if="TabCur === 0">
		    <view class="">
		      <view class="title" style="font-size: 20px; display: block; padding: 20px">
		        {{ okr.name }}
		      </view>
				<div class=""  style="padding: 5px;display: flex; align-items: center;margin-left: 15px;">
				    <div class="">
						<l-circle :percent="okr.progress" size="20px"></l-circle>
				    </div>
					<text style="margin-left: 5px;">{{okr.progress}}%</text>
					<view class="">
						<!-- 任务级别：{{okr.type? "个人级":"公司级"}}  -->
						<view :style="{ backgroundColor: okr.type == 0 ? 'blue' : 'orange', color: okr.type == 0 ? 'white' : 'black' }" style="border-radius: 8px;margin-left: 10px;margin-right: 10px;padding: 5px;">
						  {{ okr.type == 0 ? '公司级' : '个人级' }}
						</view>
					</view>
					<view class="">
						负责人：{{okr.leaderName ? okr.leaderName : "暂无"}}
					</view>
				</div>
				
			  <view class="subtitle" style="display: block;padding: 5px;margin-left: 15px;">
				  任务周期：{{cycle.startTime}} ~ {{cycle.endTime}}
			  </view>
			  <view class="" style="padding: 5px;margin-left: 15px;margin-bottom: 10px;">
			  	关键结果({{okr.subOkrList.length}})
			  </view>
		    </view>
			
			
			<view class="bg-white" style="border-radius: 8px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;" v-for="(kr, index) in okr.subOkrList" :key="index"> 
				<view class="title" style="padding: 20px;">
					{{kr.name}}
				</view>

				<view class="" style="padding: 5px;display: flex; align-items: center;margin-left: 15px;border-bottom: 1px solid #ccc;margin-right: 15px;padding-bottom: 10px;padding-top: unset;">
					<div class="">
						<l-circle :percent="kr.progress" size="20px"></l-circle>
					</div>
					<text style="margin-left: 5px;">{{kr.progress}}%</text>
				</view>
				
				<view class="flex" style="">
					<view class="flex-sub padding-sm margin-xs radius" style="text-align: center;border-right: #595959;" @click="updateKr(kr)">
						<span class="iconfont">&#xe663;</span>
						<span style="margin-left: 5px;">编辑</span>
					</view>
					<view class="flex-sub padding-sm margin-xs radius with-border" style="text-align: center;position: relative;" @click="checkKrDetail(kr)">
						<span class="iconfont">&#xe6ba;</span>
						<span style="margin-left: 5px;">详情</span>
					</view>
				</view>
			</view>
			<view class="" style="min-height: 40px;">
				
			</view>
		</view>
		
		<view class="" v-if="TabCur === 1">
			<view class="margin">记录({{renewList.length}})</view>
			<view class="parent-container" >
				<view class="" style="margin-bottom: 35px;">
					<view class="cu-form-group" v-if="renewList != null" v-for="e in renewList" @click="delComment(e)" style="margin-left: unset;">
					    <view class="container">
						  <view class="avatar-container">
							<image :src="e.avatar" class="avatar"></image>
						  </view>
						  <view class="right-content">
							<view class="comment-name" style="font-size: 10px;">{{ e.staffName }}，{{e.creatTime}}</view>
							<view class="comment-content" >{{ e.content }}</view>
						  </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部输入框，用来评价当前任务 -->
		  <!-- <view class="flex-container bg-white">
			<input
			  type="text"
			  v-model="commentMessage"
			  placeholder="请输入消息"
			  class="flex-item input-box"
			  @focus="keyboardVisible = true"
			  @blur="keyboardVisible = false"
			/>
			<button class="flex-item send-button" @click="sendMessage"  style="font-size: 13px;">发送</button>
		  </view> -->
			<view class="flex-container bg-white">
				<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]" style="min-height: 40px;">
				<view class="action">
					<text class="cuIcon-sound text-grey"></text>
				</view>
				<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
				v-model="commentMessage" ></input>
				
				<view class="action">
					<text class="cuIcon-emojifill text-grey"></text>
				</view>
				<button class="cu-btn bg-green shadow" style="width: 50px;flex: unset;" @click="sendMessage">发送</button>
				</view>
			</view>
		  
		  
		<popup-layer ref="popupRef" :direction="'top'" :style="{ zIndex: '1' }">
			<view style="text-align: center; font-size: 20px;display: flex;justify-content: space-between;" class="margin-top margin-bottom">
				<view style="padding: 15px;text-align: center;font-size: 20px;" class="cuIcon-unfold" @tap="cancleChange"></view>
				<view class="">
					{{kr.name}}
				</view>
				<view class="" style="margin-right: 40rpx;color: blue;font-size: 15px;" @tap="saveChange">
					确定
				</view>
			</view>
			
			<view class="box" style="height: 200px;">
				<view class="cu-form-group margin-top" >
					<view class="title" style="color: blue;">当前进度值(%)</view>
					<input placeholder="请输入进度值" name="name" v-model="upProgress"></input>
				</view>
				<view class="cu-form-group " >
					<view class="title">更新说明</view>
					<input placeholder="请输入更新说明" name="name" v-model="explain"></input>
				</view>
			<!-- <button class="flex-item send-button" style="font-size: 13px;" @tap="saveChange">保存</button> -->
			</view>
		</popup-layer>
		
	</view>
</template>

<script>
	import iconfont from '../../font_4280116_f6izbgedf4m/iconfont.css';
	import popupLayer from '../../components/popup-layer/popup-layer.vue';
	import request from '../../common/request';
	import common from 'common/common.js';
	export default {
		components:{
				popupLayer
			},
		data() {
			return {
				InputBottom: 0,
				// 滑动导航栏
				TabCur: 0,
				scrollLeft: 0,
				modules:[
					{"name": "okr详情"},
					{"name": "记录"},
				],
				
				scrollLeft: 0,
				commentMessage: '', // 用户输入的消息
				keyboardVisible: false, // 是否显示键盘
				// 更新说明
				explain:'',
				upProgress: '',
				boolShow:false,
				okr:{},
				kr: {},
				renew:{},
				staff:{},
				renewList:[],
				subOkrList:[],
				common:{},
				cycle:{},
			}
		},
		onLoad(options) {
			this.okr = JSON.parse(decodeURIComponent(options.okr));
			this.staff = uni.getStorageSync("staff");
			this.getOkrById();
		},
		onShow() {
			this.getRenewListByOkrId();
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
				console.log()
			},
			// 点击显示okr详情还是评论
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(this.TabCur == 0){
					// 显示下面的任务
				} else{
					// 显示下面的记录
				}
			},
			
			// 评论框发送
			 sendMessage() {
			  if (this.commentMessage.trim() !== '') {
				  this.common.parentId = this.okr.id;
				  this.common.content = this.commentMessage;
				  this.common.avatar = this.staff.avatar;
				  this.common.staffName = this.staff.name;
				  this.common.staffId = this.staff.id;
					var _this = this;
					request({
						url: common.api_base_url+'/renew',
						data:{
							"renew":_this.common,
						},
						header:{
						},
						method: 'PUT',
						success: res => {
							_this.getOkrById();
						},
						fail: function(e) {
							uni.showToast({
								title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
								icon:"loading"
							})
						},
					});
				// 清空输入框
				this.commentMessage = '';
			  } else{
				  uni.showToast({
				  	title:"内容不能为空",
				  	icon:"error"
				  })
			  }
			},
			
			// 删除
			delComment(){
				
			},
			// 计算OKR进度
			calculateTotalProgress() {
			      if (this.subOkrList.length === 0) {
			        return 0;
			      }
			   // const totalProgress = (this.subOkrList.reduce((sum, item) => sum + parseFloat(item.progress), 0) / this.subOkrList.length);
					 
			   // 将结果转换为百分数形式，保留两位有效数字
			   // return totalProgress.toPrecision(2); // 4表示总位数，包括整数和小数位
			   return Number(this.subOkrList.reduce((sum, item) => sum + parseFloat(item.progress), 0) / this.subOkrList.length);
			},
			// 获取kr详细信息
			checkKrDetail(kr){
				uni.navigateTo({
					url: `/pages/kr/krDetail?krId=${kr.id}`,
					// url:'/pages/kr/krDetail?kr='+ encodeURIComponent(JSON.stringify(kr)),
				})
			},
			// 修改进度之后，重新获取当前okr
			getOkrById(){
				var _this = this;
				request({
					url: common.api_base_url+'/okr/getOkrDetailById/' + _this.okr.id,
					data:{
					},
					method: 'GET',
					success: res => {
						_this.okr = res.data;
						console.log(_this.okr)
						_this.renewList = _this.okr.renewList;
						_this.renewList.reverse();
						_this.subOkrList = _this.okr.subOkrList;
						_this.cycle = _this.okr.cycle;
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
			// 获取所有记录的数据
			getRenewListByOkrId(){
				var id = '';
				// 说明是分任务
				if(this.okr.parentId){
					id = this.okr.parentId
				} else {
					id = this.okr.id;
				}
				var _this = this;
				request({
					url: common.api_base_url+'/renew/getRenewListByOkrId/' + id,
					data:{
					},
					method: 'GET',
					success: res => {
						_this.renewList = res.data;
						_this.renewList.reverse();
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
				
			},
			// 点击弹出更新框
			 updateKr(kr){
				 if(kr.alignmentProgress){
					 uni.showToast({
					 	title:"当前进度随对齐OKR进度变化",
					 	icon:"error",
						duration: 2500
					 })
					 return;
				 }
				this.kr = kr;
				this.$refs.popupRef.show(); // 或者 boolShow = rue
				this.upProgress = kr.progress;
				this.explain = '';
			},
			// 关闭进度更新
			cancleChange(){
				this.$refs.popupRef.close();
			},
			// 保存更新框的修改，点击保存，保存修改信息，进度
			saveChange(){
				if(this.upProgress > 100 || this.upProgress < 0){
					uni.showToast({
					  title: "请输入0-100",
					  icon: "error",
					  mask: true, // 创建一个带蒙版的自定义提示框
					  zIndex: 9999 // 设置一个较大的zIndex值
					});
					return;
				}
				if(!isFinite(this.upProgress)){
					uni.showToast({
					  title: "请输入数字",
					  icon: "error",
					  mask: true, // 创建一个带蒙版的自定义提示框
					  zIndex: 9999 // 设置一个较大的zIndex值
					});
					return;
				}
				if(!this.explain){
					uni.showToast({
					  title: "更新说明不能为空",
					  icon: "error",
					});
					return;
				}
				this.renew.staffId = this.staff.id;
				this.renew.staffName = this.staff.name;
				this.renew.avatar = this.staff.avatar;
				this.renew.okrId = this.kr.id;
				this.renew.parentId = this.okr.id;
				// 去掉前面的0
				if(this.upProgress != 0){
					this.upProgress = this.upProgress.replace(/^0+/, ''); 
				}
				this.renew.content = "修改进度："+ this.kr.name+ "，"+ this.kr.progress+ "% --> " + this.upProgress+ "%。" + "更新说明："+ this.explain;
				this.kr.progress = this.upProgress;
				var _this = this;
				request({
					url: common.api_base_url+'/renew',
					data:{
						"renew": _this.renew,
					},
					method: 'PUT',
					success: res => {
						_this.explain ='';
						this.$refs.popupRef.close();
						uni.showToast({
							title:"更新成功",
							icon:"success"
						})
						this.getOkrById();
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
				
				this.kr.parentProgress = Math.floor(this.calculateTotalProgress())
				
				request({
					url: common.api_base_url+'/okr/updateProgress',
					data:{
						"okr": _this.kr,
					},
					method: 'PUT',
					success: res => {
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
				
			},
			close(){
				this.$refs.popupRef.close();// 或者 boolShow = false
			}
		}
	}
</script>

<style scoped>
.button-container {
  display: flex; /* 使用 Flex 布局 */
  justify-content: space-between; /* 使按钮均匀分布在一行 */
  width: 100%; /* 确保按钮容器占满父容器宽度 */
}

.show-button {
  flex: 1; /* 每个按钮占据三分之一宽度 */
  text-align: center; /* 文本居中 */
}

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐容器内的内容 */
}

.avatar-container {
  /* 图片容器垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-right: 10px; /* 可根据需要调整右边距 */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.right-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.comment-name {
  font-weight: bold;
}

.comment-content {
  /* 根据需要添加样式 */
}
/* 最下面评论框样式 */
.send-button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  line-height: 25px;
  white-space: nowrap;
  flex: none;
  padding-left: 3px;
  padding-right: 3px;
  padding-left: 15px;
  padding-right: 15px;
  width: auto;
}

.flex-item {
  border: 1px solid #ccc;
  margin: 5px;
  height: 25px; /* 设置元素的高度 */
}

.flex-container {
  display: flex;
  flex-direction: row; /* 垂直居中对齐 */
  position: fixed;
  bottom: 0;
  left: 0; /* 如果需要指定水平位置，可以根据需求调整 */
  width: 100%; /* 让元素铺满屏幕宽度 */
  background-color: #fff; /* 背景颜色，根据需求自行调整 */
  z-index: 999; /* 可选，用于控制元素的层叠顺序 */
}

.input-box {
 width: 90%;
}

button {
  size: 30px;
  flex: 1;
  border-radius: 20px;
  border: none;
  text-align: center;
  font-size: 13px;
  width: 15px;
  height: 30px;
  padding-left: unset;
  padding-right: unset;
}

.item-container {
	  display: flex; /* 使用Flex布局 */
	  align-items: center; /* 垂直居中对齐 */
	}
	
	.parent-container {
	   /* display: flex; */
	    /* flex-direction: column; */
	  /* 其他Grid属性 */
	}
	
	/* 导航栏 */
	.cu-item {
		text-align: center;
	  flex: 1; /* 设置每个元素的宽度为50% */
	}
	
	/* 导航栏固定一行 */
	.propertyBox{
			flex-flow: row;
			justify-content: flex-start;
			display: flex;
		}
		
	/* okr类型展示 */
	.button-right {
	  font-size: 9px;
	  padding: 0px 10px;
	  margin-left: 10px; /* 为按钮之间添加一些间距，可根据需要调整 */
	}	
	.selected-button {
	  background-color: blue; /* 设置选中按钮的背景颜色为蓝色 */
	  color: white; /* 设置选中按钮的文字颜色为白色 */
	}
	
</style>
